<template>
	<template v-for="subItem in menuList" :key="subItem.path">
		<el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
			<template #title>
				<i :class="['iconfont menuIcon', `icon-${subItem.icon}`]"></i>
				<span>{{ subItem.title }}</span>
			</template>
			<SubMenu :menuList="subItem.children" />
		</el-sub-menu>
		<el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
			<i :class="['iconfont menuIcon', `icon-${subItem.icon}`]"></i>
			<template #title>
				<span>{{ subItem.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useTabsStore } from '@/store/modules/tabs';

defineProps({
	menuList: {
		type: Array,
		default: () => []
	}
});

const router = useRouter();
const tabsStore = useTabsStore();

const handleClickMenu = (subItem) => {
	if (subItem.isLink) window.open(subItem.isLink, "_blank");
	const { icon, path, title, name } = subItem;
	
	const tab = { icon, name, title, path };
	
	const { tabMenus } = tabsStore;
	
	const target = tabMenus.find(item => item.name === name);
	
	if(!target){
	    const tabs = [...tabMenus, tab];
	    tabsStore.setTabMenus(tabs);
	}
	
	tabsStore.setActiveTab(name);
	router.push(path);
};

</script>

<style lang="scss" scoped>
.menuIcon {
	display: inline-block;
	margin-right: 5px;
	font-size: 14px;
}

:deep .is-active {
	color: #5cd2eb;
}
</style>
